<%--
  Created by IntelliJ IDEA.
  User: 晓东√
  Date: 2024/5/30 0030
  Time: 11:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="${pageContext.request.contextPath}/mycss/style.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/js/jquery-1.11.3.js"></script>
    <title>每日打卡</title>
    <style>
        .container {
            max-width: 1000px;
            position: relative;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            transform-style: preserve-3d;
        }

        .container .card {
            position: relative;
            width: 180px;
            height: 240px;
            background: #fff;
            margin: 0 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            transform-style: preserve-3d;
            transition: transform 0.5s;
        }

        .container:hover .card {
            transform: perspective(500px) rotateY(30deg);
        }

        .container .card:hover {
            transform: perspective(500px) rotateY(0deg);
        }

        .container .card:hover ~ .card {
            transform: perspective(500px) rotateY(-30deg);
        }

        .container .card h2 {
            width: 80px;
            height: 80px;
            line-height: 80px;
            font-size: 20px;
            background: #2196f3;
            text-align: center;
            border-radius: 50%;
            color: #fff;
            transition: box-shadow 0.5s;
        }

        .container .card:hover h2 {
            background: #fff;
            color: #2196f3;
            box-shadow: 0 0 0 150px #2196ff;
        }
    </style>
</head>
<body>
<div id="content">
    <div id="clock">
        <h2>现在是北京时间</h2>
        <div id="time">
            <div>
                <span id="hour">00</span><span>Hours</span>
            </div>
            <div>
                <span id="minutes">00</span><span>Minutes</span>
            </div>
            <div>
                <span id="seconds">00</span><span>Seconds</span>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="card" onclick="punchClock()">
            <h2>打卡</h2>
        </div>
    </div>
</div>


<script>
    function twoNum(num) {
        return num < 10 ? `0` + num : num
    }

    function clock() {
        /*let hours = document.getElementById('hour')
        let minutes = document.getElementById('minutes')
        let seconds = document.getElementById('seconds')*/

        let h = new Date().getHours()
        let m = new Date().getMinutes()
        let s = new Date().getSeconds()

        $("#hour").html(twoNum(h))
        $("#minutes").html(twoNum(m))
        $("#seconds").html(twoNum(s))
    }

    setInterval(clock, 1000);

    function punchClock() {
        //alert('打卡');
        $.ajax({
            url: '${pageContext.request.contextPath}/punchClock.action',
            type: 'get',
            dataType: 'json',
            success: function (data) {
                alert(data.msg);
            },
            error: function () {

            }
        })
    }


</script>
</body>
</html>
